<template>
	<view class="content">
		<!-- <view class="header"><image src="../../static/shilu-login/logo.png"></image></view> -->

		<view class="list">
			<!-- <view class="list-call">
				<image class="img" src="/static/shilu-login/1.png"></image>
				<input class="biaoti" v-model="phoneno" type="number" maxlength="11" placeholder="输入手机号" />
			</view> -->
			<view class="list-call">
				<image class="img" src="/static/shilu-login/4.png"></image>
				<input class="biaoti" v-model="name" placeholder="输入账号" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/2.png"></image>
				<input class="biaoti" v-model="password" type="text" maxlength="32" placeholder="输入密码" password="true" />
			</view>
		</view>
		<view class="loginBtnCon"><button class="loginBtn cu-btn round bg-green" type="default" @click="loginClick">登录</button></view>

		<!-- <view class="xieyi">
			<navigator url="forget" open-type="navigate">忘记密码</navigator>
			<text>|</text>
			<navigator url="reg" open-type="navigate">注册账户</navigator>
		</view> -->
	</view>
</template>

<script>
import { mapMutations, mapActions } from 'vuex';
export default {
	onLoad(obj) {
		if (obj.type) {
			this.pageType = obj.type;
		}
	},
	data() {
		return {
			phoneno: '',
			password: '',
			name: '',
			pageType: ''
		};
	},
	methods: {
		...mapMutations({
			setUserState: 'user/setUserState',
			setAccountLoginUserState: 'user/setAccountLoginUserState'
		}),
		...mapActions({
			getServerUserInfo: 'user/getServerUserInfo',
			loginByNo: 'user/loginByNo',
			loginByAdminAccount: 'user/loginByAdminAccount',
			webUserInit: 'user/webUserInit'
		}),
		loginClick(info) {
			if (this.name === '#clearStorage') {
				uni.clearStorage();
			}
			if (!this.name) {
				uni.showToast({
					icon: 'none',
					title: '请输入账号'
				});
				return;
			}
			if (!this.password) {
				uni.showToast({
					icon: 'none',
					title: '请输入密码'
				});
				return;
			}
			switch (this.pageType) {
				case 'agentTest': {
					uni.showLoading({
						title: '请求中',
						mask: true
					});
					this.loginByAdminAccount({
						no: this.name,
						pass: this.password
					})
						.then(res => {
							console.log(res);
							uni.hideLoading();
							this.setAccountLoginUserState({ ...res, openId: res.WxAppOpenId });
							if (res.accountType == '1') {
								uni.redirectTo({
									url: '/agentPages/agent/agentIndex?type=agent'
								});
							} else {
								uni.redirectTo({
									url: '/agentPages/agent/agentIndex?type=staff'
								});
							}
						})
						.catch(err => {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: err
							});
						});
					break;
				}
				case 'servicer': {
					uni.redirectTo({
						url: `/servicerPages/servicer/servicerIndex`
					});
					break;
				}
			}
		}
	}
};
</script>

<style lang="less">
.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.header {
	width: 161upx;
	height: 161upx;
	background: rgba(63, 205, 235, 1);
	box-shadow: 0upx 12upx 13upx 0upx rgba(63, 205, 235, 0.47);
	border-radius: 50%;
	margin-top: 30upx;
	margin-left: auto;
	margin-right: auto;
}
.header image {
	width: 161upx;
	height: 161upx;
	border-radius: 50%;
}

.list {
	display: flex;
	flex-direction: column;
	padding-top: 50upx;
	padding-left: 70upx;
	padding-right: 70upx;
}
.list-call {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 100upx;
	color: #333333;
	border-bottom: 1upx solid rgba(230, 230, 230, 1);
}
.list-call .img {
	width: 40upx;
	height: 40upx;
}
.list-call .biaoti {
	flex: 1;
	text-align: left;
	font-size: 32upx;
	line-height: 100upx;
	margin-left: 16upx;
}

.dlbutton {
	color: #ffffff;
	font-size: 34upx;
	width: 470upx;
	height: 100upx;
	background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
	box-shadow: 0upx 0upx 13upx 0upx rgba(164, 217, 228, 0.2);
	border-radius: 50upx;
	line-height: 100upx;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100upx;
}
.dlbutton-hover {
	background: linear-gradient(-90deg, rgba(63, 205, 235, 0.9), rgba(188, 226, 158, 0.9));
}
.xieyi {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 30upx;
	margin-top: 80upx;
	color: #ffa800;
	text-align: center;
	height: 40upx;
	line-height: 40upx;
}
.xieyi text {
	font-size: 24upx;
	margin-left: 15upx;
	margin-right: 15upx;
}

.loginBtnCon {
	margin: 32rpx 0 0 0;
	text-align: center;
	.loginBtn {
		width: 400rpx;
		height: 74rpx;
		background-color: #39b54a;
		color: white;
	}
}
</style>
